<template>
	<view class="index">
		<!-- 车牌号虚拟键盘 -->
		<view class="">
			<u-keyboard ref="uKeyboard" mode="car" :show="car_show" @change="carvalchang()" :overlay='false'
				@backspace="backspace" @confirm="confirm()" @cancel="cancel()"></u-keyboard>
		</view>
		<!-- 确定取消模态框 -->
		<u-modal :show="isshow" :showCancelButton='true' :title="title" :content='content' @confirm='cleanHistory()'
			@cancel='isshow=false'></u-modal>
		<!-- 输入框 -->
		<view class="car_box">
			<input placeholder="请输入车牌号" border="surround" clearable @focus="fuc()" v-model.trim="carval" autofocus
				maxlength='10' class="numipt" />
			<view class="msg_text" :style="{ color: msgTextColor }">{{msg_text}}</view>
			<!-- 输入历史 -->
			<view class="history-box" v-if="historyList.length !== 0">
				<view class="history-title">
					<text>输入历史</text>
					<u-icon name="trash" size="24" @click='isshow=true'></u-icon>
				</view>
				<!-- 列表区域 -->
				<view class="history-list">
					<view v-for="(item, i) in historys" :key="i" class="uni-tag" @click="historyclick($event, i)">
						{{item}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				car_show: false, //车牌虚拟键盘
				carval: '', //车牌号
				msg_text: '', //提示文本
				msgTextColor: 'black', //文本样式 
				timer: null, // 延时器的 timerId
				historyList: [], //输入历史
				isshow: false, //是否弹出消息模态框
				title: '提示', //提示标题
				content: '确定清空输入历史吗？', //提示内容
				iswatch: false, //是否开启监听
			}
		},
		onLoad() {
			// 如果解析过程中发生错误（例如，存储的值不是有效的 JSON 字符串），
			//则会使用空数组 [] 作为默认值。这样，可以确保 historyList 变量始终被赋值为一个数组，即使本地存储中没有名为 carval 的值或者该值无效。
			this.historyList = JSON.parse(uni.getStorageSync('carval') || '[]')
		},
		computed: {
			historys() {
				// 注意：由于数组是引用类型，所以不要直接基于原数组调用 reverse 方法，以免修改原数组中元素的顺序
				// 而是应该新建一个内存无关的数组，再进行 reverse 反转
				return [...this.historyList].reverse()
			}
		},
		watch: {
			// 监听输入框的变化,当iswatch为true才开始调用
			'carval': function(o,n) {
				if (this.iswatch === false) return
				this.iscar()
			}
		},
		methods: {
			// 根据输入的车牌号判断是否在库,在库则跳转首页
			async iscar() {
				const {
					data: res
				} = await uni.$http.post('/place/is/car', {
					car_number: this.carval
				})
				// 3.2 请求失败
				if (res.code === 200) {
					//请求成功
					this.msg_text = res.msg
					this.msgTextColor = 'green'
					// 储存车牌号到本地
					uni.setStorageSync('car_number', `${this.carval}`)
					// 调用后台检查月卡会员是否过期
					uni.$http.post('/vip/modify/vip_month')
					// 调用后台检查年卡会员是否过期
					uni.$http.post('/vip/modify/vip_year')
					// 将输入的值存入历史列表
					this.saveSearchHistory()
					// 跳转首页并携带车牌号参数
					uni.reLaunch({
						url: '/pages/home/home?car_number=' + this.carval
					});

				} else if (res.code === 500) {
					this.msg_text = res.msg
					this.msgTextColor = 'red'
				} else {
					return uni.showToast({
						title: '数据请求失败！',
						duration: 1500,
						icon: 'none',
					})
				}

			},
			// 2. 保存搜索关键词的方法
			saveSearchHistory() {
				// 1. 将 Array 数组转化为 Set 对象
				const set = new Set(this.historyList)
				// 2. 调用 Set 对象的 delete 方法，移除对应的元素
				set.delete(this.carval)
				// 3. 调用 Set 对象的 add 方法，向 Set 中添加元素
				set.add(this.carval)
				// 4. 将 Set 对象转化为 Array 数组
				this.historyList = Array.from(set)
				// 调用 uni.setStorageSync(key, value) 将搜索历史记录持久化存储到本地
				uni.setStorageSync('carval', JSON.stringify(this.historyList))
			},
			// 清空搜索历史记录
			cleanHistory() {
				// 清空 data 中保存的搜索历史
				this.historyList = []
				// 清空本地存储中记录的搜索历史
				uni.setStorageSync('carval', '[]')
				// 关闭模态框
				this.isshow = false
			},
			// 点击历史框向输入框添加内容
			historyclick(event, index) {
				this.iswatch=true//开启监听输入框的值
				this.carval = this.historys[index]
			},
			//输入框获得焦点
			fuc() {
				this.car_show = true
				uni.hideKeyboard() //禁止软键盘弹起
			},
			// 输入框发生变化
			carvalchang(val) {
				if (this.carval.length < 10) {
					this.carval = this.carval + val
				}
				// 清除 timer 对应的延时器
				clearTimeout(this.timer)
				// 重新启动一个延时器，并把 timerId 赋值给 this.timer
				this.timer = setTimeout(() => {
					this.iscar() //变化就获取网络请求
				}, 500)

			},
			// 退格键被点击
			backspace() {
				// 删除value的最后一个字符
				if (this.carval.length) this.carval = this.carval.substr(0, this.carval.length - 1);
			},
			// 确认键关闭键盘
			confirm() {
				this.car_show = false
			},
			//取消键关闭键盘
			cancel() {
				this.car_show = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.index{
	
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background-color: rgb(249, 249, 249);
		  background-image: linear-gradient(
		      to right,
		      rgba(235, 233, 230, 0.5) 1px,
		      transparent 1px
		    ),
		    linear-gradient(to bottom, rgba(235, 233, 230, 0.5) 1px, transparent 1px);
		  background-size: 20px 20px; /* 格子的大小 */
		.im{
			width: 100%;
			height: 100%;
		}
	}
	.car_box {
		position: absolute;
		top: 25%;
		left: 50%;
		transform: translate(-50%, -25%);
		width: 90%;

		.numipt {
			padding: 0px 10px;
			width: 100%;
			height: 50px;
			box-sizing: border-box;
			border: 1px solid rgb(140,140,140);
			border-radius: 6px;
		}

		.numipt:focus {
			border: 1px solid #409eff;
		}

		.msg_text {
			padding: 4px 0px;
			font-size: 12px;
		}

		.history-box {
			margin-top: 30px;
			padding: 0 5px;

			.history-title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 40px;
				font-size: 13px;
				border-bottom: 1px solid #efefef;
			}

			.history-list {
				display: flex;
				flex-wrap: wrap;

				.uni-tag {
					margin-top: 8px;
					margin-right: 5px;
					padding: 5px 10px;
					max-width: 90px;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					background-color: rgb(235, 235, 235);
					border-radius: 4px;
					font-size: 14px;
					color: rgb(90, 90, 90);
				}
			}
		}
	}
</style>